<template>
	<div class="notice">
		<img :src="icon" alt="通知" />
		<div class="txt-box">
			<div class="txt" v-for="(item, index) in noticeData">
				<span>{{ item.activityDescription }}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['noticeData'],
	data() {
		return {
			icon: require('./assets/mall-icon-notice@3x.png'),
			timer: null,
			amount: 10, //偏移的单位: px
			speed: 120, //偏移的速度: 毫秒
			onlyKey: null
		};
	},
	computed: {},
	components: {},
	watch: {},
	created() {},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			let _this = this;
			let txtBox = document.querySelector('.txt-box');
			let txt = document.querySelector('.txt');
			let txtWidth = txt.clientWidth;

			if (txt.clientWidth > txtBox.clientWidth) {
				loop();
			}

			function loop() {
				let distance = 0;
				let timer = setInterval(() => {
					// console.log('distance: ' + distance)
					if (distance <= -txtWidth) {
						distance = txtBox.clientWidth;
					} else {
						distance -= _this.amount;
					}
					txt.style.transform = 'translateX(' + distance + 'px)';
				}, _this.speed);
				_this.timer = timer;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@mall/assets/css/common';

.notice {
	height: rem(48);
	display: flex;
	align-items: center;
	padding: 0 rem(20);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: $tc;
	img {
		width: rem(36);
		margin: 0 rem(15) 0 0;
	}

	.txt-box {
		flex: 1;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.txt {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			span {
				font-size: rem(28);
				color: #ffffff;
				font-weight: 400;
				white-space: nowrap;
				padding: 0 rem(60) 0 0;

				&:last-child {
					padding: 0;
				}
			}
		}
	}
}
</style>
